<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="top-view flex row">
			<view :class="[ tabType==1 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(1)">
				<text :class="[ tabType==1 ? 'top-item-title-active':'top-item-title']">可使用优惠券</text>
				<view :class="[ tabType==1 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==2 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(2)">
				<text :class="[ tabType==2 ? 'top-item-title-active':'top-item-title']">不可使用优惠券</text>
				<view :class="[ tabType==2 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" top="200rpx">
			<view class="item-view flex aCenter" v-for="(item,index) in dataList" :key="index">
				<!-- 可使用优惠券 -->
				<!-- <image v-if="tabType==1" class="coupon-bg" src="../../static/coupon_bg.png"></image> -->
				<image v-if="tabType==1" class="coupon-bg-no" src="../../static/bukeshiyong.png"></image>
				
				<view v-if="tabType==1" class="coupon-view-no flex row aCenter">
					
					<view class="cou-left-view flex row center">
						
						<!-- <text class="coupon-rmb">¥</text> -->
						<!-- <text class="coupon-price">{{item.money}}</text> -->
						<image style="width: 120rpx;height: 120rpx;" :src="item.image"></image>
						
					</view>
					
					<view class="coupon-line"></view>
					
					<view class="flex-1 flex right-view">
						
						<text class="right-title">{{item.name}}</text>
						
						<view class="flex row aCenter">
							<view class="authority">
								<text class="right-x">仅限 {{item.goods_name.substring(0,10)}} 商品使用</text>
							</view>
						</view>
						
						<view class="cou-left-view flex row center">
							
							<text class="coupon-rmb">¥</text>
							
							<text class="coupon-price">{{item.money}}</text>
							
						</view>
						
						<text class="right-hint">有效期：{{item.start_mon}} ~ {{item.end_mon}}</text>
						
						<text class="right-hint text-ellipsis">使用时间：星期{{item.week}}；{{item.start_time}}~{{item.end_time}}</text>
						
					</view>
					
					<!-- 去使用 -->
					<view class="btn-use" @click.stop="openScanUi(item)">
						去使用
					</view>
				</view>
				
				
				<!-- 不可使用优惠券 -->
				<image v-if="tabType==2" class="coupon-bg-no" src="../../static/bukeshiyong.png"></image>
				
				<view v-if="tabType==2" class="coupon-view-no flex row aCenter">
					
					<view class="cou-left-view flex row center">
						
						<!-- <text class="coupon-rmb" style="opacity: 0.6;">¥</text> -->
						
						<!-- <text class="coupon-price" style="opacity: 0.6;">{{item.money}}</text> -->
						
						<image style="width: 120rpx;height: 120rpx;" :src="item.image"></image>
						
					</view>
					
					<view class="coupon-line"></view>
					
					<view class="flex-1 flex right-view">
						
						<text class="right-title" style="opacity: 0.6;">{{item.name}}</text>
						
						<view class="flex row aCenter">
							<view class="authority" style="opacity: 0.6;">
								<text class="right-x" style="opacity: 0.6;">仅限 {{item.goods_name.substring(0,10)}} 商品使用</text>
							</view>
						</view>
						
						<view class="cou-left-view flex row center">
							
							<text class="coupon-rmb">¥</text>
							
							<text class="coupon-price">{{item.money}}</text>
							
						</view>	
											
						<text class="right-hint">有效期：{{item.start_mon}} ~ {{item.end_mon}}</text>
						
						<text class="right-hint text-ellipsis">使用时间：星期{{item.week}}；{{item.start_time}}~{{item.end_time}}</text>
						<!-- 0.未使用1.已使用2.未到时间3.已过期4.不在使用范围 -->
						<view class="flex row center">
							<view class="right-info-view flex row">
								不可使用原因：{{item.status == 1 ? '已使用':(item.status == 3 ? '已过期': item.status == 4 ? '不在使用范围': 
								item.status == 0 ? '未使用': item.status == 2 ? '未到时间':'已废弃')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		
		<!-- pop 规格选择 -->
		<!-- pop 规格选择 -->
		<!-- pop 规格选择 -->
		<uni-popup ref="popupSpecs" type="bottom">
			<view class="popup-view flex">
				<view class="specs-title-view flex center">
					<text class="specs-title-view-title">请选择规格</text>
				</view>
				<view class="specs-goodsname-view flex row aCenter">
					<image class="specs-goodsname-icon" :src="currentItem.goods_image"></image>
					<text class="specs-goodsname">{{ currentItem.goods_name }}</text>
				</view>
				<text class="specs-title-view-title specs-title-mar">请选择规格</text>
				<!-- 规格列表 -->
				<view class="specs-view flex row wrap">
					<view 
						v-for="(item,index) in currentSpecsList" :key="'specs' + index"
						:class="[item.active ? 'specs-item-active': 'specs-item','flex center']"
						@click.stop="setSpecs(item)"
					>
						<text :class="[item.active ? 'specs-title-active': 'specs-title']">{{item.name}}</text>
					</view>
				</view>
				<view class="edit-spces-bom flex row aCenter">
					<view class="go-submit-view flex center" @click.stop="onSubmit">
						去结算
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popup" type="center">
			<view class="flex center">
				<view class="bg-view-box flex" @click="openScan">
					<image class="bg-view flex" src="../../static/scan_page.png"></image>
					<image class="btn-view" src="../../static/scan_btn.png"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import wxUtil from '../../xlblib/wechat/wx-util.js';
	import XUtil from '../../common/xlb-util.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabType: 1,
				
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {},// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				// 列表数据
				dataList: [],
				
				//规格编辑数据
				currentItem: {},       // 选规格的 主商品信息
				currentSpecsList: [],  // 当前商品的规格列表
				specItem: {},          // 当前选择的 规则选项item
				
				couponItem: {},
				userAgent: 'wechat', //wechat alipay web
			}
		},
		onShow() {
			if(XUtil.getUserAgent()){
				//获取当前端口是什么
				this.userAgent = XUtil.getUserAgent();
			}	
		},
		methods: {
			updataTabType (type) {
				this.tabType = type;
				this.mescroll.resetUpScroll();
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(){
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			upCallback(page) {
				let params = {
					token: uni.getStorageSync("token"),
					p: page.num,
					type: this.tabType,
				}
				console.log(params);
				this.$request("api/order/coupon_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							if(page.num == 1){
								this.dataList = data.list;
							}else{
								this.dataList = this.dataList.concat(data.list);
							}
							this.mescroll.endSuccess(data.list.length);
						}else{
							this.mescroll.endErr()
						}
					}).catch((e) => {
						this.dataList = [];
						this.mescroll.endErr()
						console.log(e);
					});
			},
			
			openScanUi (item) {
				this.couponItem = item;
				this.$refs.popup.open();
			},
			
			openScan () {
				this.$refs.popup.close();
				let that = this;
				
				if(this.userAgent == 'wechat'){
					wxUtil.use().then(()=>{
						console.log(wxUtil.jweixin);
						wxUtil.jweixin.scanQRCode({
							needResult: 1,
							scanType: ["qrCode"],
							success: function (res) {
								var result = res.resultStr;
								console.log(result);
								//解析数据问题
								if(result.indexOf('=') != -1){
									let _params = result.split('=');
									if(_params.length == 2){
										let _paramList = _params[1].split('_');
										if(_paramList.length == 3){
											let invite_code = _paramList[2];
											// uni.showToast({ title: invite_code, icon: 'none',duration:2000 });
											//缓存桌位号
											uni.setStorageSync("invite_code", invite_code);
											that.bindInviteCode(invite_code);
											// that.useStoreWine(invite_code);
										}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
									}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
								}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
							}
						})
					});
				}else{
					ap.scan({
						type: 'qr'
					}, function (res) {
						if (res.error == 10) {
							// 错误码为10：用户取消操作
							// ...
						} else if (res.error == 11) {
							// 错误码为11：扫码失败
							alert('网络开小差了...');
							// ....
						} else {
							console.log(res.code);
							
							var result = res.code;
							//解析数据问题
							if(result.indexOf('=') != -1){
								let _params = result.split('=');
								if(_params.length == 2){
									let _paramList = _params[1].split('_');
									if(_paramList.length == 3){
										let invite_code = _paramList[2];
										// uni.showToast({ title: invite_code, icon: 'none',duration:2000 });
										//缓存桌位号
										uni.setStorageSync("invite_code", invite_code);
										that.bindInviteCode(invite_code);
										// that.useStoreWine(invite_code);
									}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
								}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
							}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
						}
					});
				}
				
				
			},
			
			bindInviteCode (invite_code) {
				let params = {
					token: uni.getStorageSync("token"),
					invite_code: invite_code,
				}
				console.log(params);
				this.$request("api/user/ceshi", params)
					.then(({ code, msg, data, time }) => {
						console.log('测试绑定桌位号=', code, msg, data);
						if(code == 1){
							//跳转到扫码点餐页面
							this.useCoupon(this.couponItem);
						}else{
							uni.showToast({ title: msg, icon: 'none',duration:2000 })
						}
					}).catch((e) => {
						uni.showToast({ title: '绑定桌位码失败', icon: 'none',duration:2000 })
						console.log(e);
					});
			},
			
			//使用优惠券 
			useCoupon (item) {
				console.log('使用优惠券=', item);
				
				// 赋值当前选中的优惠券item
				this.currentItem = item;
				
				// 赋值规格数据，有就赋值 没有就直接进入确认订单
				if(item.spec_name && item.spec_name.length > 0){
					let _list = [];
					item.spec_name.map((item, index)=>{
						_list.push({
							active: index == 0 ? true : false,
							name: item,
						});
					});
					this.currentSpecsList = _list;
					
					this.$refs.popupSpecs.open('bottom');
				}else{
					this.currentSpecsList = [];
					
					this.onSubmit();
				}
				
				return ;
				
				// uni.showToast({ title: "结算中...", icon: 'loading', mask: true, duration: 10000 });
				// //api/order/coupon_goods
				// let params = {
				// 	token: uni.getStorageSync("token"),
				// 	id: item.id,
				// }
				// console.log(params);
				// this.$request("api/order/coupon_goods", params)
				// 	.then(({ code, msg, data, time }) => {
				// 		console.log(code, msg, data);
				// 		uni.hideToast();
				// 		uni.showToast({ title: msg, icon: 'none' });
				// 		if(code == 1){
				// 			uni.navigateTo({
				// 				url: "./coupon-order?order=" + JSON.stringify(data),
				// 			})
				// 		}else{
							
				// 		}
				// 	}).catch((e) => {
				// 		uni.hideToast();
				// 		console.log(e);
				// 	});
			},
			
			setSpecs (obj) {
				console.log(obj);
				let _list = [...this.currentSpecsList];
				_list.map((item, index) => {
					if(obj.name ==  item.name){
						item.active = true;
					}else{
						item.active = false;
					}
				});
				this.currentSpecsList = _list;
			},
			onSubmit () {
				//获取规格
				let _spce = '';
				let _list = [...this.currentSpecsList];
				_list.map((item, index) => {
					if(item.active){
						_spce = item.name;
					}
				});
				
				//结算订单
				// api/order/buyNowConfirmPage
				uni.showToast({ title: "结算中...", icon: 'loading', mask: true, duration: 10000 });
				//api/order/coupon_goods
				let params = {
					token: uni.getStorageSync("token"),
					// coupon_id: this.currentItem.coupon_id,
					coupon_id: this.currentItem.id,
					goods_id: this.currentItem.goods_id,
					spec_name: _spce,
				}
				console.log(params);
				this.$request("api/order/buyNowConfirmPage", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						uni.hideToast();
						uni.showToast({ title: msg, icon: 'none' });
						if(code == 1){
							uni.navigateTo({
								url: "./coupon-order?order=" + JSON.stringify(data) + "&coupon_id=" + params.coupon_id + "&goods_id=" + params.goods_id,
							})
						}else{
							
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #010B24;
	}
	.top-view {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
	}
	.top-item {
		flex: 1;
		height: 100rpx;
	}
	.top-item-active {
		flex: 1;
		height: 100rpx;
	}
	.top-item-title {
		font-size: 30rpx;
		color: #FFFFFFCC;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.top-item-title-active {
		font-size: 30rpx;
		color: #FFF;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.top-item-line {
		width: 75rpx;
		height: 5rpx;
		background-color: #010B24;
		border-radius: 3rpx;
	}
	.top-item-line-active {
		width: 75rpx;
		height: 5rpx;
		background-color: #FFF;
		border-radius: 3rpx;
	}
	.item-view {
		width: 100%;
		position: relative;
		margin-bottom: 20rpx;
	}
	.coupon-bg {
		width: 700rpx;
		height: 234rpx;
		position: absolute;
		top: 0;
	}
	.coupon-view {
		width: 700rpx;
		height: 234rpx;
		position: relative;
	}
	.cou-left-view {
		width: 146rpx;
		height: 100%;
	}
	.coupon-rmb {
		font-size: 20rpx;
		color: #EA662C;
		margin-top: 10rpx;
	}
	.coupon-price {
		font-size: 36rpx;
		color: #EA662C;
	}
	.coupon-line {
		width: 0;
		height: 150rpx;
		border-left: 1rpx dotted #EA662C;
	}
	.right-view {
		z-index: 7;
		padding: 0 30rpx;
		overflow: hidden;
	}
	.authority {
		padding: 1rpx 18rpx;
		border-radius: 30rpx;
		border: 1rpx solid #EA662C;
		margin: 5rpx 0;
	}
	.right-title {
		font-size: 28rpx;
		color: #FFF;
	}
	.right-hint {
		font-size: 24rpx;
		color: #878A94;
	}
	.right-x {
		font-size: 24rpx;
		color: #EA662C;
	}
	
	.coupon-bg-no {
		width: 700rpx;
		height: 305rpx;
		position: absolute;
		top: 0;
	}
	.coupon-view-no {
		width: 700rpx;
		height: 305rpx;
		position: relative;
	}
	.right-info-view {
		margin-top: 20rpx;
		padding: 2rpx 20rpx;
		background-color: #384054;
		font-size: 26rpx;
		color: #FFFFFF66;
	}
	.btn-use {
		padding: 6rpx 20rpx;
		background-color: #FFF;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #010B24;
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		z-index: 8;
		&:active {
			background-color: #FFFFFFEE;
		}
	}
	// ===== popup -- popup -- popup -- popup =====
	.popup-view {
		width: 100%;
		min-height: 300rpx;
		// overflow: auto;
		// -webkit-overflow-scrolling:touch;
		background-color: #FFF;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: relative;
	}
	.specs-view {
		width: 100%;
		padding: 12rpx 36rpx;
		margin-bottom: 20rpx;
	}
	.specs-item {
		padding: 14rpx 45rpx;
		background-color: #F0F0F0;
		border-radius: 40rpx;
		margin-right: 26rpx;
	}
	.specs-title {
		font-size: 26rpx;
		color: #1B1B1B;
	}
	.specs-item-active {
		padding: 14rpx 45rpx;
		background-color: #B053FF;
		border-radius: 40rpx;
		margin-right: 26rpx;
	}
	.specs-title-active {
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.specs-title-view {
		width: 100%;
		height: 80rpx;
	}
	.specs-title-view-title {
		font-size: 28rpx;
		color: #121212;
		font-weight: bold;
	}
	.specs-goodsname-view {
		width: 100%;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 12rpx;
	}
	.specs-goodsname {
		flex: 1;
		font-size: 26rpx;
		color: #121212;
		margin-left: 12rpx;
	}
	.specs-goodsname-icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 16rpx;
		background-color: #F0F0F0;
	}
	.specs-title-mar {
		margin-left: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 12rpx;
	}
	.edit-spces-bom {
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		padding: 0 36rpx;
		justify-content: flex-end;
	}
	.go-submit-view {
		padding: 16rpx 36rpx;
		background-color: #B053FF;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #FFF;
	}
	.bg-view-box {
		width: 634rpx;
		height: 751rpx;
		position: relative;
	}
	.bg-view {
		width: 634rpx;
		height: 751rpx;
		position: absolute;
		top: 0;
	}
	.btn-view {
		width: 263rpx;
		height: 73rpx;
		position: absolute;
		left: 189rpx;
		bottom: 156rpx;
	}
</style>
